<script setup>
import Editor from './editor/Editor.vue'
import { ref, computed } from 'vue';
const showcontentStr = ref('')
const editorRef = ref(null);
const content = ref('<p><tg-emoji emoji-id="5368324170671202286">😂</tg-emoji><b><em><s><u>BIUA</u></s></em></b> <a href="http://aaa.bbb">http link</a> <a href="https://aaa.bbb">https link</a> <a href="tg://aaa.bbb">tg link</a> <code>code</code> </p><blockquote>Blockquote </blockquote><p></p><p></p><p>前面有两个空行。</p>');
// 获取编辑器中的html字符串
function getHTML() {
    /**
    * getHTML 可以取到html字符串
    * 由于tg不允许有<p>标签，所以需要去掉.
    * 但是给editor setHtml的时候需要保留<p></p>标签，所以，如果后续需要把这些数据设置到编辑态，服务端在存数据的时候需要存没有去掉<p></p>标签的html字符串
    */
    showcontentStr.value = editorRef.value.getHTML()
                            .replace(/<p>/g, "").replace(/<\/p>/g, "\n\n")
    console.log(showcontentStr.value)
}
// 往编辑器中设置值
function setContent() {
    editorRef.value.setContent('<p><b><em><s><u>设置内容setHtml</u></s></em></b></p>')
}
// 获取编辑器中的纯文本
function getText() {
    showcontentStr.value = editorRef.value.getText()
}
</script>

<template>
  <Editor 
    ref ="editorRef"
    :content="content"
    @update:content="getHTML"
     />

    <div class="testbtn">
        <button @click="setContent()">setContent</button>
        <button @click="getHTML()">getHTML</button>
        <button @click="getText()">getText</button>
    </div>
    <pre  class="testpre">
    {{showcontentStr}}
    </pre>
</template>

<style lang="scss">
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
  }
  .testbtn{
    margin: 20px;
    display: flex;
    button{
        flex: 1;
        border: 0;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 20px;
        background: linear-gradient(to right, #AAC7FF, #5C89F9 );
        color: #fff;
        cursor: pointer;
        margin: 0 10px;
    }
  }
  .testpre{
    width:100%;
    height:100%;
    overflow:scroll;
  }
</style>
